<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /**
        结构伪类1的核心关键思想:  1.选择的元素是同时满足':'前后的条件元素(条件的交集)
                            2. ':' 前后的两个条件是独立存在的
                            下面例子  是寻找为第一个子元素 且为p的元素
     */
    ul:first-child{
        color: red;
    }
    /**
        结构伪类2的思想  1.选择的元素是同时满足':'前后的条件元素 (条件的交集)
                        2. ':' 后面的条件是在前面的条件的前提下的
                        下面例子 就是寻找第一个为ul的元素

     */
    ul:first-of-type{
        color: red;
    }
</style>
<body>
    <div>
        <p>123</p>
        1
        <ul>
            0
            <div>-1</div>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
</html>